<template>
  <div class="top-right-btn" :style="style">
    <el-row>
      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
      </el-tooltip>
      <!-- <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
      </el-tooltip> -->
      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
      </el-tooltip>
    </el-row>
    <el-dialog :title="title" :visible.sync="open" append-to-body>
      <el-transfer
        ref="transfer"
        :titles="['显示', '隐藏']"
        v-model="value"
        :data="dataList"
        @change="dataChange"
      >
      <!-- <span slot-scope="{ option }" draggable="!option.visible" @dragstart="drag($event, option)">
        {{ option.label }}
      </span> -->
 
      </el-transfer>
    </el-dialog>
  </div>
</template>
<script>

import Sortable from 'sortablejs'

import { setStorageItem, getStorageItem } from '@/utils/storage.js'

export default {
  name: "RightToolbar",
  data() {
    return {
      // 显隐数据
      value: [],
      // 弹出层标题
      title: "显示/隐藏",
      // 是否显示弹出层
      open: false,
      draggingKey: '',  // 当前拖拽项
      dataList:[]
    };
  },
  props: {
    storageKey:{
      type:String
    },
    showSearch: {
      type: Boolean,
      default: true,
    },
    columns: {
      type: Array,
    },
    // search: {
    //   type: Boolean,
    //   default: true,
    // },
    gutter: {
      type: Number,
      default: 10,
    },
  },
  computed: {
    style() {
      const ret = {};
      if (this.gutter) {
        ret.marginRight = `${this.gutter / 2}px`;
      }
      return ret;
    }
  },
  // watch:{
  //   columns:{
  //     deep:true,
  //     handler(val){
  //       this.dataList=val
  //     }
  //   }
  // },
 
  created() {
    this.setData()
    // 显隐列初始默认隐藏列
    // for (let item in this.dataList) {
    //   if (this.dataList[item].visible === false) {
    //     this.value.push(parseInt(item));
    //   }
    // }
  },
  mounted(){
   

  },
  methods: {

    changeColumns(data){
      this.$emit('changeColumns',data)

    },
    setData(){
       let data = getStorageItem(this.storageKey)
      if(data) {
        this.dataList=data

      }else {

        this.dataList = this.columns
      }
      for (let item in this.dataList) {
        if (this.dataList[item].visible === false) {
         
          this.value.push(parseInt(this.dataList[item].key));
        }
      }
    },
    drag(ev, option){
      this.draggingKey = option.id
      const transfer = this.$refs.transfer.$el
      const leftPanel = transfer.getElementsByClassName("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0];
      const rightPanel = transfer.getElementsByClassName("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0];
      const rightEl = leftPanel.getElementsByClassName("el-transfer-panel__list")[0]
      Sortable.create(rightEl, {
        onEnd: (evt) => {

          const { oldIndex, newIndex } = evt;




          if (this.value.length <= 0) {

            this.dataList.splice(newIndex, 0, this.dataList.splice(oldIndex, 1)[0])
            this.changeColumns(this.dataList)
          } else {

            let showList = this.dataList.filter(item => {
              return item.visible
            })

            const noshowList = this.dataList.filter(item => {
              return !item.visible
            })
            // showList.splice(newIndex, 0, showList.splice(oldIndex, 1)[0])

            showList.forEach(((item, index) => {
              if (index == oldIndex) {
                let temp = showList[oldIndex]
                if (!temp || temp == showList[newIndex]) {

                  return
                }
                showList[oldIndex] = showList[newIndex]
                showList[newIndex] = temp

              }
            }))
            console.log(showList, noshowList);
            const newList = [...showList, ...noshowList]
            this.changeColumns(newList)
          }

          // this.dataList.splice(this.dataList[newIndex], 0, this.dataList.splice(this.dataList[oldIndex].key, 1)[0])
          // let temp = this.dataList[oldIndex].key
          // this.dataList[oldIndex].key = this.dataList[newIndex].key
          // this.dataList[newIndex].key=temp




        }
      })

    },
    // 搜索
    toggleSearch() {
      this.$emit("update:showSearch", !this.showSearch);
    },
    // 刷新
    refresh() {
      this.$emit("queryTable");
    },
    // 右侧列表元素变化
    dataChange(data) {
      this.$emit('dataChange',data)
      // for (let item in this.columns) {
       
      //   const key = this.columns[item].key;
      //   this.columns[item].visible = !data.includes(key);
      // }
      // setStorageItem(this.storageKey, this.columns)

    },
    // 打开显隐列dialog
    showColumn() {
      this.open = true;

      // this.$nextTick(() => {

       
      // })

    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-transfer__button {
  border-radius: 50%;
  padding: 12px;
  display: block;
  margin-left: 0px;
}
::v-deep .el-transfer__button:first-child {
  margin-bottom: 10px;
}
</style>
